<template>
    <div class="cl2">
        <div class="iHead">平安县城建设工作机制</div>
        <div class="main">
            <div class="m-t">
                <div class="m-t-i">工作机制</div>
                <div class="m-t-i">机制内容</div>
            </div>
            <div class="m-t" v-for="(i, o) in infoData[1][0]" :key="o">
                <div class="m-t-i" v-if="o !== '1'">{{ i }}</div>
                <div class="m-t-i m-t-i-b" v-if="o !== '1'" @click="openHref(o)">
                    <p>查看</p>
                </div>
            </div>
        </div>
        <el-dialog :title="this.infoData[1][0][choseItem]" :visible.sync="chengyuanShow" width="100%"
            :fullscreen="true">
            <iframe style="height:90vh;width: 100%;" :src="this.infoData[1][1][choseItem]" frameborder="0"></iframe>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['infoData'],
    data() {
        return {
            chengyuanShow: false
        }
    },
    mounted() {

    },
    methods: {
        openHref(i) {
            this.choseItem = i
            this.chengyuanShow = true;
            // window.location.href = this.infoData[1][1][i]
        }
    }

}
</script>

<style lang="scss" scoped>
.cl2 {
    width: 400px;
    height: 300px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 300px;
        z-index: 1;
        background-image: url('../../assets/denglukuang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: .4;
    }

    .main {
        position: relative;
        z-index: 2;
        width: 90%;
        text-shadow: 0 0 8px #000;
        color: #fff;

        .m-t {
            display: flex;
            border-bottom: 1px solid #eeeeee11;
            padding: 10px 0;
            align-items: center;

            .m-t-i {
                width: 50%;
                text-align: center;
            }

            .m-t-i-b {
                display: flex;
                justify-content: center;

                p {
                    width: 50px;
                    height: 24px;
                    border-radius: 4px;
                    border: 1px solid #3553da;
                    box-shadow: 0 0 8px #3553da;
                    box-sizing: border-box;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &:hover {
                        cursor: pointer;
                        box-shadow: 0 0 8px #536bda;

                    }
                }

            }
        }

        .m-t:nth-of-type(2) {
            display: none;
        }

        .m-t:last-of-type {
            border-bottom: 0;
        }
    }
}
</style>